<template>
  <el-form-item label="乘机人数" :prop="prop">
    <el-popover placement="bottom" :width="400" trigger="click">
      <template #reference>
        <el-input
          style="width:207px"
          v-model="passengerInfo"
          placeholder="请选择乘机人员"
          readonly
        ></el-input>
      </template>
      <el-row>
        <div class="text">成人</div>
        <div class="text">儿童</div>
        <div class="text">婴儿</div>
      </el-row>
      <el-input-number
        v-model="num[0]"
        :min="1"
        :max="9"
        size="small"
        label="成人"
      ></el-input-number>
      <el-input-number
        v-model="num[1]"
        :min="0"
        :max="9"
        size="small"
        label="儿童"
      ></el-input-number>
      <el-input-number
        v-model="num[2]"
        :min="0"
        :max="9"
        size="small"
        label="婴儿"
      ></el-input-number>
    </el-popover>
  </el-form-item>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, watch, inject } from 'vue';
export default defineComponent({
  name: 'PassengerPicker',
  props: {
    prop: String,
    passengerInfo: {
      type: String,
      default: '',
      required: true,
    },
  },
  setup(props, context) {
    //乘客（成人，儿童，婴儿）人数
    const num: Ref<number[]> = ref(
      inject(
        'num',
        ref<number[]>([0, 0, 0])
      )
    );
    watch(num.value, () => {
      let s: String = '';
      if (num.value[0] != 0) {
        s += '成人 ' + num.value[0] + '  ';
      }
      if (num.value[1] != 0) {
        s += '儿童 ' + num.value[1] + '  ';
      }
      if (num.value[2] != 0) {
        s += '婴儿 ' + num.value[2];
      }
      context.emit('update:passengerInfo', s);
    });
    return {
      num,
    };
  },
});
</script>

<style lang="scss">
@import '@/assets/css/config.scss';
.el-row {
  margin-top: 10px;
}
.text {
  font-size: 20px;
  margin: 2px 46px 15px;
}
.el-input-number {
  margin: 0 16px;
  width: 100px;
}
.el-input-number__decrease,
.el-input-number__increase {
  top: 1.5px;
  background-color: lighten($themeLight, 50%);
  margin: 0;
  padding: 0;
}
</style>
